<div th:fragment="control_chart_pyramid">
<script type="text/javascript">
	// 示例数据
	var get_pyramid_option = function()
	{
		return {
			legend : {
				data : [ '男', '女' ],
				x : 'center'
			},
			color : [ "#5d9eff", "#1ec6a0" ],
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow'
				},
				trigger : 'axis'
			},
			grid : [ {
				show : false,
				top : 50,
				bottom : 90,
				left : 50,
				right : 65,
				containLabel : false
			} ],
			xAxis : [ {
				name : "x轴",
				type : 'value',
				axisLabel : {
					rotate : -30
				},
				max : 60,
				min : -60
			} ],
			yAxis : [ {
				boundaryGap : true,
				name : "y轴",
				type : 'category',
				axisTick : {
					show : false
				},
				axisLabel : {
					rotate : -30,
					formatter : 0,
					interval : 0
				},
				data : [ "10", "20", "30", "40", "50", "60", "70", "80", "90" ]
			} ],
			series : [ {
				name : '男',
				column : "SUMVALUE1",
				type : 'bar',
				symbolSize : 8,
				barCategoryGap : '10%',
				hoverAnimation : false,
				stack : 'PYRAMID',
				data : [ -33, -34, -35, -36, -37, -36, -35, -34, -32 ]
			}, {
				name : '女',
				column : "SUMVALUE2",
				type : 'bar',
				symbolSize : 8,
				hoverAnimation : false,
				stack : 'PYRAMID',
				data : [ 13, 14, 15, 16, 17, 16, 15, 14, 12 ]
			} ],
			sql : ""
		};
	}

	/** 柱状图元数据 */
	function metadata_pyramid(params)
	{
		var opt = get_pyramid_option();// 每个视图创建新的option，防止相互污染
		params = $.extend({}, {
			GRID : {},
			X_Y_AXIS : {},
			DATASET : {},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_common(params), this);
	}

	/** 柱状图 元数据视图 面板视图 */
	function metadata_view_pyramid(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var series = option.series, sql = option.sql;

			var setDataSetDetail = function(s)
			{
				var name = s.name, type = s.type, column = s.column;
				var detail_view = $($("#DATASET_DETAIL").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("select").val(type);
				detail_view.find("input[name=column]").val(column);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var t = $(item).find("select").val();
					$.extend(option.series[i], {
						name : n,
						column : c,
						type : t
					});
					option.legend.data[i] = n;
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//系列类型
			view.on("change", "select", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "pyramid", function(result)
				{
					if (result.state == "true")
					{

						option.yAxis[0].data = result.NAME;
						if (option.yAxis[1])
						{
							option.yAxis[1].data = result.NAME;
						}
						option.xAxis[0].max = result.max;
						option.xAxis[0].min = 0 - parseInt(result.max);
						if (option.xAxis[1])
						{
							option.xAxis[1].max = result.max;
							option.xAxis[1].min = 0 - parseInt(result.max);
						}
						for ( var i in series)
						{
							series[i].data = result[series[i].column];
						}
						_this.linkViewOption(option);
					} else
					{
						$.QuickAlert.alertFail({
							content : result.faultInfo
						});
						;
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
			});
			$(this.settingPanel).append(view);
		}
		return $.extend(new metadata_view_chart_common(control), this);
	}

	/** 柱状图 表单视图 */
	function metadata_form_view_pyramid(control)
	{
		this.OPTION = function(value)
		{
			value.tooltip.formatter = function(p)
			{
				var str = "";
				for ( var i in p)
				{
					var name = p[i].name;
					var seriesName = p[i].seriesName;
					var value = p[i].value;
					value = value < 0 ? -value : value;
					str += i == 0 ? name + '<br>' : '';
					str += seriesName + ':' + value + '<br>';
				}
				return str;
			}

			value.xAxis[0].axisLabel.formatter = function(value, index)
			{
				return Math.abs(value);
			}
		this.echart.setOption(value);
		}
		return $.extend(new metadata_form_view_chart_common(control), this);
	}
</script>
</div>
